<template>
	<div class="activeTable">
		<h3>基础表格</h3>
		<el-table :data="dataTable" style="width:100%">
			<el-table-column label="日期" prop="date" width="180"></el-table-column>
			<el-table-column label="姓名" prop="name" width="180"></el-table-column>
			<el-table-column label="地址" prop="address" width="200"></el-table-column>
		</el-table>

		<h3>带斑马纹表格stripe(true或false)</h3>
		<el-table :data="dataTable" stripe style="width:100%">
			<el-table-column label="日期" prop="date" width="180"></el-table-column>
			<el-table-column label="姓名" prop="name" width="180"></el-table-column>
			<el-table-column label="地址" prop="address" width="200"></el-table-column>
		</el-table>

		<h3>带边框表格boder(true或false)</h3>
		<el-table :data="dataTable" stripe boder style="width:100%">
			<el-table-column label="日期" prop="date" width="180"></el-table-column>
			<el-table-column label="姓名" prop="name" width="180"></el-table-column>
			<el-table-column label="地址" prop="address" width="200"></el-table-column>
		</el-table>

		<h3>带状态表格-row-class-name 属性来为 Table 中的某一行添加 class，表明该行处于某种状态</h3>
		<el-table :data="dataTable" stripe boder :row-class-name="tableRowClassName" style="width:100%">
			<el-table-column label="日期" prop="date" width="180"></el-table-column>
			<el-table-column label="姓名" prop="name" width="180"></el-table-column>
			<el-table-column label="地址" prop="address" width="200"></el-table-column>
		</el-table>

		<h3>固定表头只需设置height属性</h3>
		<el-table :data="dataTable" stripe boder height="240" style="width:100%">
			<el-table-column label="日期" prop="date" width="180"></el-table-column>
			<el-table-column label="姓名" prop="name" width="180"></el-table-column>
			<el-table-column label="地址" prop="address" width="200"></el-table-column>
		</el-table>

		<h3>固定列fixed</h3>
		<el-table :data="tableData" border style="width: 100%">
			<el-table-column fixed prop="date" label="日期" width="150">
			</el-table-column>
			<el-table-column prop="name" label="姓名" width="120">
			</el-table-column>
			<el-table-column prop="province" label="省份" width="120">
			</el-table-column>
			<el-table-column prop="city" label="市区" width="120">
			</el-table-column>
			<el-table-column prop="address" label="地址" width="300">
			</el-table-column>
			<el-table-column prop="zip" label="邮编" width="120">
			</el-table-column>
			<el-table-column fixed="right" label="操作" width="100">
				<template slot-scope="scope">
					<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
					<el-button type="text" size="small">编辑</el-button>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				dataTable: [{
					date: '2018-1-1',
					name: '张三',
					address: '天津市西青区海泰发展六道'
				}, {
					date: '2018-2-2',
					name: '李四',
					address: '天津市西青区海泰发展六道'
				}, {
					date: '2018-3-3',
					name: '张三',
					address: '天津市西青区海泰发展六道'
				}, {
					date: '2018-4-4',
					name: '张三',
					address: '天津市西青区海泰发展六道'
				}, {
					date: '2018-5-5',
					name: '张三',
					address: '天津市西青区海泰发展六道'
				}, {
					date: '2018-6-6',
					name: '张三',
					address: '天津市西青区海泰发展六道'
				}],
				tableData2: [{
					date: '2016-05-03',
					name: '王小虎',
					province: '上海',
					city: '普陀区',
					address: '上海市普陀区金沙江路 1518 弄',
					zip: 200333
				}, {
					date: '2016-05-02',
					name: '王小虎',
					province: '上海',
					city: '普陀区',
					address: '上海市普陀区金沙江路 1518 弄',
					zip: 200333
				}, {
					date: '2016-05-04',
					name: '王小虎',
					province: '上海',
					city: '普陀区',
					address: '上海市普陀区金沙江路 1518 弄',
					zip: 200333
				}, {
					date: '2016-05-01',
					name: '王小虎',
					province: '上海',
					city: '普陀区',
					address: '上海市普陀区金沙江路 1518 弄',
					zip: 200333
				}]
			}
		},
		methods: {
			tableRowClassName(row, rowIndex) {
				if(rowIndex === 1) {
					return 'warning-row'
				} else if(rowIndex === 3) {
					return 'success-row'
				}
				return '';
			}
		}
	}
</script>

<style>
	.el-table .warning-row {
		background: oldlace;
	}
	
	.el-table .success-row {
		background: #f0f9eb;
	}
</style>